{{define "title"}}{{if .topic.Tid}}修改{{else}}发布{{end}}主题 {{end}}
{{define "content"}}
<div class="row">
	<div class="col-md-9 col-sm-6">
		<div class="sep20"></div>

		<ol class="breadcrumb">
			<li><a href="/">首页</a></li>
			<li><a href="/topics">主题</a></li>
			<li class="active">{{if .topic.Tid}}编辑{{else}}发布{{end}}</li>
		</ol>
		<div class="page box_white">
			<form class="form-horizontal validate-form" role="form" action="{{if .topic.Tid}}/topics/modify{{else}}/topics/new{{end}}" data-redirect="/topics{{if .topic.Tid}}/{{.topic.Tid}}?r={{timestamp}}{{end}}">
				{{if .topic.Tid}}
				<input type="hidden" name="tid" value="{{.topic.Tid}}" />
				{{else}}
				<input type="hidden" name="usernames" class="usernames" />
				{{end}}
				<div class="form-group form-group-sm">
					<label class="col-sm-1 control-label" for="title"><abbr>*</abbr>标题</label>
					<div class="col-sm-11">
						<textarea id="title" class="form-control required" style="resize: none;" rows="1" maxlength="120" name="title" autofocus="autofocus" placeholder="请输入主题标题(最多120个字），如果标题能够表达完整内容，则正文可以为空">{{.topic.Title}}</textarea>
					</div>
				</div>
				<div class="form-group form-group-sm">
					<label class="col-sm-1 control-label" for="markdown-content">正文</label>
					<div class="col-sm-11">
						<div class="row clearfix md-toolbar">
							<ul class="col-md-10 list-inline">
								<li class="edit cur"><a href="#" tabindex="-1"><i class="glyphicon glyphicon-edit"></i> 编辑</a></li>
								<li class="preview"><a href="#" title="预览" tabindex="-1"><i class="glyphicon glyphicon-eye-open preview"></i> 预览</a></li>
								<!-- <li class="wide"><a href="/wide/playground" tabindex="-1" target="_blank" title="通过Wide编辑代码"><i class="glyphicon glyphicon-cloud"></i> Wide</a></li> -->
							</ul>
							<div class="col-md-2 text-right">
								<i id="upload-img" class="glyphicon glyphicon-picture upload-img tool-tip" data-toggle="tooltip" data-placement="top" title="上传图片"></i>
							</div>
						</div>
						<textarea class="form-control need-autogrow main-textarea" id="markdown-content" name="content" rows="15" tabindex="0">{{.topic.Content}}</textarea>
						<div class="content-preview"></div>
					</div>
				</div>

				<div class="form-group form-group-sm">
					<label class="col-sm-1 control-label" for="title"><abbr>*</abbr>节点</label>
					<div class="col-sm-6">
						<select id="nid" name="nid" class="form-control required" data-placeholder="请选择一个节点">
							<option></option>
						{{if .had_recommend}}
							{{range .nodes}}
								<option value="{{.Nid}}"{{if $.topic.Tid}}{{if eq $.topic.Nid .Nid}} selected{{end}}{{else if eq $.nid .Nid}}selected{{end}}>{{.Name}}/{{.Ename}}</option>
							{{end}}
						{{else}}
							{{range .nodes}}
								{{range $parent, $children := .}}
								<optgroup label="{{$parent}}">
									{{range $children}}
									<option class="l2" value="{{.nid}}"{{if $.topic.Tid}}{{if eq $.topic.Nid .nid}} selected{{end}}{{else if eq $.nid .nid}}selected{{end}}>{{.name}}/{{.ename}}</option>
									{{end}}
								</optgroup>
								{{end}}
							{{end}}
						{{end}}
						</select>
					</div>
				</div>

				<div class="form-group form-group-sm">
					<div class="col-sm-11 col-sm-offset-1">
						最热节点&nbsp;
						{{range .tab_list}}
						<a href="javascript:chooseNode('{{.nid}}')" class="node">{{.name}}</a> &nbsp;
						{{end}}
					</div>
				</div>

				<div class="form-group form-group-sm cell">
					<label class="col-sm-1 control-label" for="title">可见性</label>
					<div class="col-sm-11">
						<select id="permission" name="permission" class="form-control" style="width: 30%;">
							<option value="0" {{if not .topic.Permission}}selected{{end}}>公开</option>
							<option value="1" {{if .topic.Permission}}selected{{end}}>登录可见</option>
							{{if or .me.IsRoot .me.IsVip}}
								<option value="3" {{if $.topic.Permission}} selected{{end}}>付费可见</option>
							{{end}}
						</select>
					</div>
				</div>

				{{if .captchaId}}
				<div class="form-group form-group-sm cell">
					<label class="col-sm-1 control-label" for="captchaSolution">验证码</label>
					<div class="col-sm-4">
						<input type="hidden" name="captchaid" value="{{.captchaId}}">
						<div class="input-group">
							<input type="text" id="captchaSolution" name="captchaSolution" class="form-control" placeholder="请输入右侧验证码" />
							<span class="input-group-btn">
								<img id="reload-captcha" src="/captcha/{{.captchaId}}.png" alt="验证码" title="看不清，点击" />
							</span>
						</div>
					</div>
				</div>
				{{end}}

				<div class="form-group form-group-sm cell">
					<div class="col-sm-6 col-sm-offset-5">
						<button type="submit" class="btn btn-success btn-sm" id="submit">{{if .topic.Tid}}提交修改{{else}}发布主题{{end}}</button> (Ctrl/Command+Enter)
					</div>
				</div>
				<div class="form-group form-group-sm">
					<label class="col-sm-1 control-label">预览</label>
					<div class="col-sm-11">
						<div id="content-preview" style="border: 1px solid #ccc; padding: 5px; font-size: 13px;"></div>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="col-md-3 col-sm-6">
		<div class="sep20"></div>

		<div class="box_white sidebar sb-author">
			<div class="top">
				<h3 class="title"><i class="glyphicon glyphicon-list-alt"></i>&nbsp;发帖提示</h3>
			</div>
			<div class="sb-content">
				<span class="help-block">
					<ul>
						<li>
							<span class="f13">主题标题</span>
							<div class="sep10"></div>
							<div>请在标题中描述内容要点。如果一件事情在标题的长度内就已经可以说清楚，那就没有必要写正文了。</div>
							<div class="sep10"></div>
						</li>
						<li>
							<span class="f13">正文</span>
							<div class="sep10"></div>
							<div>可以在正文中为你要发布的主题添加更多细节。本站支持 Markdown 文本标记语法。</div>
							<div class="sep10"></div>
							<div>在正式提交之前，你应该在提交按钮下方查看 Markdown 正文的实际渲染效果。</div>
							<div class="sep10"></div>
							<span class="f13" style="font-weight: bold;">Markdown 格式说明</span>
							<div class="sep10"></div>
							<ul>
								<li>支持 Markdown 格式, <strong>**粗体**</strong>、~~删除线~~、<code>`单行代码`</code></li>
								<li>http://example.org 自动加链接</li>
								<li>代码支持高亮，如：```go func main() {}``` 则是Go语法高亮</li>
								<li><strong>@name</strong> 会链接到用户页面，并会通知他</li>
								<li>![alt 文本](http://foo.com/bar.jpg) 显示图片</li>
								<li>:smile: 支持 <strong>emoji 表情</strong>，见<a href="http://www.emoji-cheat-sheet.com/" target="_blank">Emoji cheat sheet</a></li>
								<li>完整 Markdwon 语法说明：<a href="http://wowubuntu.com/markdown/" target="_blank">语法说明 (简体中文版)</a></li>
								<!-- <li>支持嵌入 Wide 的Playground 代码直接运行</li> -->
							</ul>
							<div class="sep10"></div>
							<div>图片支持拖拽、截图粘贴等方式上传。</div>
							<div class="sep10"></div>
						</li>
						<li>
							<span class="f13">选择节点</span>
							<div class="sep10"></div>
							<div>在最后，请为你的主题选择一个节点。恰当的归类会让你发布的信息更加有用。</div>
							<div class="sep10"></div>
							<div>你可以在主题发布后 2 天内，对标题或者正文进行编辑。同时，在 2 天内，你可以重新为主题选择节点。</div>
							<div class="sep10"></div>
						</li>
					</ul>
				</span>
			</div>
		</div>

	</div>
</div>
{{end}}
{{define "css"}}
<link href="https://cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet">
{{include "cssjs/prism.css.html" .}}
{{end}}
{{define "js"}}
<script type="text/javascript" src="https://cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>

{{include "cssjs/prism.js.html" .}}
{{include "cssjs/publish.js.html" .}}

<script type="text/javascript" src="{{.static_domain}}/static/dist/js/topics.min.js"></script>
<script type="text/javascript">
// 需要加载的侧边栏
SG.SIDE_BARS = [];

var isNew = {{.topic.Tid}} == '';

$(function(){

	// 文本框自动伸缩
	$('.need-autogrow').autoGrow();
	var select2 = $('#nid').select2({
		theme: "classic"
	});

	window.chooseNode = function(node) {
		select2.val(node).trigger('change');
		saveTopicComposeDraft();
	}

	function saveTopicComposeDraft() {
		if (!isNew) {
			return;
		}

		var title = $('#title').val(),
			content = $('#markdown-content').val(),
			nid = $('#nid').val();

		var objdata = {title: title, content: content, nid: nid};

		saveComposeDraft(uid, 'topic', objdata);
	}

	var curNid = {{.nid}};

	(function() {
		if (isNew && !curNid) {
			var draft = loadComposeDraft(uid, 'topic');
			if (draft) {
				$('#title').val(draft.title);
				$('#markdown-content').val(draft.content);
				if (draft.nid) {
					chooseNode(draft.nid);
				}
			}
		}
	})();

	$('#title,#markdown-content,#nid').on('change', function() {
		saveTopicComposeDraft();
	});
});
</script>
{{end}}
